<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            margin: 20px 550px;
            width: 300px;
            height: 100px;
            /* background-color: #e1e1e1; */
        }

        :root {
            --red: 108;
            --green: 87;
            --blue: 106;
            --threshold: 0.5;
            --border-threshold: 0.8;
        }

        #btn {
            width: 400px;
            height: 150px;
            border: none;
            font-size: 100%;
            padding: 50px 100px;
            margin: 20px;
        }

        #btn {
            background-color: rgb(var(--red), var(--green), var(--blue));
            --r: calc(var(--red) * 0.2126);
            --g: calc(var(--green) * 0.7152);
            --b: calc(var(--blue) * 0.0722);
            --sum: calc(var(--r) + var(--g) + var(--b));
            --lightness: calc(var(--sum) / 255);
            color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
            --border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);
        }

        p {
            margin: 20px 60px;
        }

        #red {
            color: red;
            font-size: 20px;
            font-weight: bold;
        }

        #green {
            color: green;
            font-size: 20px;
            font-weight: bold;

        }

        #blue {
            color: blue;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <button id="btn">rgb(108,87,106)</button>
    <p id="red">R：<input type="range" min="0" max="255" value="108" name="red" onchange="change()"></p>
    <p id="green">G：<input type="range" min="0" max="255" value="87" name="green" onchange="change()"></p>
    <p id="blue">B：<input type="range" min="0" max="255" value="106" name="blue" onchange="change()"></p>
    <script>
        var eleRanges = document.querySelectorAll('input[type="range"]');
        Array.from(eleRanges).forEach(function (range) {
            range.addEventListener('input', function () {
                document.documentElement.style.setProperty('--' + this.name, this.value);
            });
        });

        function change() {
            var value1 = document.querySelectorAll('input')[0].value;
            var value2 = document.querySelectorAll('input')[1].value;
            var value3 = document.querySelectorAll('input')[2].value;
            let btn = document.getElementById('btn');
            btn.textContent = 'rgb(' + value1 + ',' + value2 + ',' + value3 + ')';
        }

    </script>
</body>

</html>